Random background texts

James Peret 8 years ago
parent
commit
065997ad52
3 changed files with 41 additions and 2 deletions
  1. 1 2
      app/index.html
  2. 33 0
      app/scripts/controllers/navigation.js
  3. 7 0
      app/styles/main.css

+ 1 - 2
app/index.html

@@ -54,7 +54,6 @@
54 54
 <body ng-app="goApp">
55 55
 
56 56
 	<div ng-controller='BackgroundController' class="layer-background">
57
-    <div>{{random_text}}</div>
58 57
     <fa-app id="app1">
59 58
       <fa-render-node fa-node="backgroundView" id="render"></fa-render-node>
60 59
     </fa-app>
@@ -63,7 +62,7 @@
63 62
 
64 63
 
65 64
   <div ng-controller='NavigationController' class="layer-menu">
66
-
65
+    <div class="bg-text" ng-show="show_bg_text" ng-bind-html="random_text" ng-style="bg_text_style" class='fx-fade-normal fx-speed-1000'></div>
67 66
     <ul class="nav-menu" ng-style="menu1pos">
68 67
       <li ng-repeat="item in navigation" class='fx-fade-normal fx-speed-1000'>
69 68
         <a ng-click="btnNavclick($index)" class="btn-menu">{{item.i18n[lang]}}</a>

+ 33 - 0
app/scripts/controllers/navigation.js

@@ -37,6 +37,7 @@ angular.module('goApp.navigation', ['famous.angular', 'ngRoute', 'ngFx', 'ngAnim
37 37
           if(menu_opened == false){
38 38
             menu_opened = true;
39 39
             $scope.menu1pos = getMenuPos($scope.navigation.length);
40
+            startRandomBgText();
40 41
           }
41 42
         });
42 43
       } else {
@@ -44,6 +45,7 @@ angular.module('goApp.navigation', ['famous.angular', 'ngRoute', 'ngFx', 'ngAnim
44 45
         if(menu_opened == false){
45 46
           menu_opened = true;
46 47
           $scope.menu1pos = getMenuPos($scope.navigation.length);
48
+          startRandomBgText();
47 49
         }
48 50
       }
49 51
     }
@@ -126,4 +128,35 @@ angular.module('goApp.navigation', ['famous.angular', 'ngRoute', 'ngFx', 'ngAnim
126 128
       return new_nav;
127 129
     }
128 130
 
131
+    $scope.random_text = "";
132
+    $scope.show_bg_text = false;
133
+
134
+    var randomIntFromInterval = function(min,max) {
135
+        return Math.floor(Math.random()*(max-min+1)+min);
136
+    };
137
+
138
+    var startRandomBgText = function(){
139
+      console.log("> Starting Random BG Text Function")
140
+      $timeout(function(){
141
+        console.log("> Showing BG Text")
142
+        $scope.random_text = "<p><span>Se a mão lança</span><br><span>no ar não fica</span><br><span>se a mão alcança</span><br><span>o que caiu</span></p></p>"
143
+        $scope.bg_text_style = randomPos(130, 50);
144
+        $scope.show_bg_text = true;
145
+        $timeout(function(){
146
+          console.log("> Hiding BG Text")
147
+          $scope.random_text = ""
148
+          $scope.show_bg_text = false;
149
+          startRandomBgText();
150
+        }, randomIntFromInterval(8000, 15000));
151
+      }, randomIntFromInterval(3000, 15000));
152
+    }
153
+
154
+    var randomPos = function(width, height){
155
+      var max_v = window.innerHeight - height - 50;
156
+      var pos_v = Math.floor(Math.random() * max_v)
157
+      var max_h = window.innerWidth - width - 50;
158
+      var pos_h = Math.floor(randomIntFromInterval((window.innerWidth/3),max_h))
159
+      return {'top': pos_v, 'left' : pos_h, 'width' : width, 'height' : height };
160
+    }
161
+
129 162
   }]);

+ 7 - 0
app/styles/main.css

@@ -371,3 +371,10 @@ td span {
371 371
 .page h2 span {
372 372
     background-color: white;
373 373
 }
374
+
375
+.bg-text {
376
+  color: white;
377
+  font-family: monospace;
378
+  position: absolute;
379
+  font-size: 14px;
380
+}